<template>
  <div id="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="双11大家都在买"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="hot">
      <h6>热门搜索</h6>
      <ul>
        <li @click="gosearch(item.cat_one_id)" v-for="item in hot" :key="item.cat_one_id">
          {{ item.cat_one_id }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Search",
  data() {
    return {
      value: "",
      hot: [],
    };
  },
  async created() {
    this.$parent.showTabbar = false;
    const { data } = await this.$request.get("/api/goods/category");
    this.hot = data.data.list;
  },
  destroyed() {
    this.$parent.showTabbar = true;
  },
  methods: {
    onSearch() {
      if (this.value === "") return;
      this.$router.push({
        path: "/searchgoods",
        query: {
          goods_name: this.value,
        },
      });
    },
    onCancel() {
      this.$router.back();
    },
    gosearch(val) {
      this.$router.push( {
        path:"/searchgoods",
        query: {
           cat_one_id: val,
        },
      });
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#search {
  height: 666px;
  width: 100%;
  background-color: #eee;
}
.hot {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: left;
  h6 {
    font-size: 14px;
    color: #999;
    font-weight: normal;
  }
  ul {
    margin-top: 20px;
    &::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
    }
    li {
      padding: 5px;
      border: 1px solid #999;
      font-size: 12px;
      color: #333;
      float: left;
      margin-right: 16px;
      margin-bottom: 16px;
      border-radius: 5px;
      &:first-child {
        color: #dd1a21;
        border-color: #dd1a21;
      }
    }
  }
}
.van-search {
  border-bottom: 1px solid #f0f0f0;
}
</style>
